import { RoleModel } from "@/components/model"
import useRpcApi from "@/hooks/useRpcApiHook"
import { Button, Form, FormInstance, Input, Modal, Popconfirm, message } from "antd"
import React, { useEffect, useRef, useState } from "react"
import { UserModel } from "."
import { PlusOutlined } from "@ant-design/icons"
import { ActionType, ProColumns, ProTable } from "@ant-design/pro-components"
import { SERVICE_API } from "@/components/CommonConstants"
import BindRoleModal from "./BindRoleModal"



interface RoleBoundModalProps {
    open: boolean
    user: UserModel
    handleCancel: () => void
    handleOk: () => void
}

type PageItem = {
    role_code: string,
    role_name: string,
    role_description: string,
    res_description: string,
    create_time: string,
}


/**
 * 
 * @param param0 角色设置Modal
 * @returns 
 */
function RoleBindModal({ open, user, handleCancel, handleOk, }: RoleBoundModalProps) {
    const actionRef = useRef<ActionType>()
    const formRef = useRef<FormInstance>()
    const { pageQuery, apiRpc } = useRpcApi()

    const [openBindRoleModal, setOpenBindRoleModal] = useState(false);

    useEffect(() => {
        if (open) {
            actionRef?.current?.reload()
        }
    }, [open])

    // 定义表格列
    const columns: ProColumns<PageItem>[] = [
        {
            title: "角色编码",
            dataIndex: "role_code",
            key: "role_code",
            width: "15%",
            ellipsis: true,
        },
        {
            title: "角色名称",
            dataIndex: "role_name",
            key: "role_name",
            width: "15%",
            ellipsis: true,
        },
        {
            title: "描述",
            dataIndex: "role_description",
            key: "role_description",
            width: "20%",
            ellipsis: true,
        },
        {
            title: "创建时间",
            dataIndex: "create_time",
            key: "create_time",
            width: "10%",
            ellipsis: true,
            search: false,
            editable: false,
        },
        {
            title: "资源描述",
            dataIndex: "res_description",
            key: "res_description",
            width: "20%",
            ellipsis: true,
            search: false,
        },
        {
            title: "操作",
            valueType: "option",
            key: "option",
            width: "10%",
            render: (_dom, record, _id, action) => [
                <Popconfirm
                    title=""
                    description="删除此项?"
                    onConfirm={() => {
                        apiRpc(SERVICE_API.USER_ROLE_UNBIND, {
                            userid: user.userid,
                            role_codes: [record.role_code]
                        })
                            .then((_res) => {
                                actionRef?.current?.reload()
                            })
                            ;
                    }}
                    onCancel={() => {
                        console.log(record, "   act  ", action)
                    }}
                    cancelText="取消"
                    okText="确定"
                >
                    <a>删除</a>
                </Popconfirm>,

            ],
        },
    ]

    const queryTableData = (params: any): Promise<any> => {
        const { current, pageSize } = params
        const _params = { ...params }
        _params["bound_user"] = user.userid
        delete _params.current
        delete _params.pageSize
        return pageQuery(SERVICE_API.ROLE_QUERY_PAGE, current, pageSize, _params)
    }

    function onCancel() {
        handleCancel()
    }


    function onAddRow(row: PageItem) {
        console.log("新增记录", row)
    }



    return (
        <Modal title={`[${user.username}]资源设置`} open={open} width={1200} footer={null} onCancel={onCancel}>
            <BindRoleModal open={openBindRoleModal}
                user={user}
                handleCancel={() => setOpenBindRoleModal(false)}
                handleOk={() => {
                    setOpenBindRoleModal(false)
                    actionRef?.current?.reload()
                }}
            />
            <div>
                <ProTable<PageItem>
                    actionRef={actionRef}
                    cardBordered
                    formRef={formRef}
                    rowKey={"id"}
                    scroll={{
                        x: "max-content",
                        y: "calc(100vh - 400px)",
                    }}
                    bordered
                    form={{}}
                    columns={columns}
                    size={"small"}
                    request={params => queryTableData(params)}
                    postData={
                        (rows: PageItem[]) => rows.map(row => {
                            row.create_time = row.create_time.substring(0, 10)
                            return row
                        })
                    }
                    toolBarRender={() => [
                        <Button key="primary" type="primary" onClick={() => {
                            setOpenBindRoleModal(true)
                        }}>
                            <PlusOutlined />
                            新建
                        </Button>,
                    ]}
                >

                </ProTable>
            </div>
        </Modal>
    )
}

export default RoleBindModal;
